<template>
    <div style="padding: 0 17px">
        <Breadcrumb/>
        <div style="display: flex;flex-wrap: wrap; margin-top: 20px;">
            <span style="min-width: 150px;margin-right: 15px">
                <OrganizationTree
                        @change="load"
                        @tree-select-changed="treeSelectChanged"
                        v-model="selectedOrganizationId"
                />
            </span>
            <el-input v-model="keyWord" placeholder="单位名称"
                      style="width: 300px;height: 33px;margin-right: 15px;font-size: 13px;" clearable></el-input>
            <el-date-picker style="width: 200px;margin-right: 15px" v-model="searchDate" value-format="YYYY-MM"
                            type="month" placeholder="月份"/>
            <el-button icon="Search" type="primary" style="color: #fff;font-size: 12px;background-color: #1890ff;"
                       @click="load">搜索
            </el-button>
        </div>

        <el-table :data="tableData" :row-style="{ height: '77px' }" border
                  style="width: calc(100vw - 240px);margin-top: 20px;height: 70vh;color: #909399;font-size: 15px;">
            <el-table-column prop="id" label="ID" width="100"/>
            <el-table-column prop="name" label="单位名称" width="auto"/>
            <el-table-column align="center" label="操作" fixed="right" width="180">
              <template v-slot="scope">
                <el-button type="primary" size="small" icon="Edit" @click="exportPdf(scope.row.id)">导出</el-button>
              </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :current-page="currentPage"
                :page-size="pageSize"
                :page-sizes="[10, 20, 30, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :background="true"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
    </div>
</template>

<script>
    import request from "@/utils/request.js";
    import OrganizationTree from "@/components/OrganizationTree.vue";
    import Breadcrumb from "@/components/Breadcrumb.vue";
    import {serverIp} from "../../../public/static/config"
    import htmlToPdf from "@/utils/htmlToPdf.js";

    export default {
        name: "ClientOperationReport",
        components: {Breadcrumb, OrganizationTree},
        data() {
            return {
                serverIp,
                dialogImportVisible: false,
                userInformation: JSON.parse(localStorage.getItem("user")),
                currentData: {},
                selectedOrganizationId: JSON.parse(localStorage.getItem("user")).organization,
                keyWord: '',     // 搜索框
                searchDate: '',
                tableData: [],  // 表单
                currentPage: 1,
                pageSize: 10,
                total: 0,
            }
        },
        mounted() {
            // 初始化加载用户数据
            this.load()
        },

        methods: {
            exportPdf(clientId){
              // 清空pdf数据
              if (localStorage.getItem("pdfData")){
                localStorage.removeItem("pdfData")
              }
              // 获取pdf数据
              this.getData(clientId)
            },
            getData (val) {
                let date;
                console.log("this.searchDate" + this.searchDate)
                if (this.searchDate === '' || this.searchDate === undefined || this.searchDate === null) {
                    date = new Date();
                } else {
                    date = new Date(this.searchDate);
                }
                console.log("this.searchDate1" + date)
                let new_year = date.getFullYear(); // 取当前的年份
                let month = date.getMonth();
                let new_month = month + 1; // 取当前的月份
                let mon = "";
                let day = 0;
                let firstDay = new Date(new_year, month, 1); // 取当年当月中的第一天
                let lastDay = new Date(new_year, new_month, 0).getDate(); // 获取当月最后一天日期
                if (firstDay.getMonth() < 9) {
                    mon = "0" + (firstDay.getMonth() + 1);
                } else {
                    mon = firstDay.getMonth() + 1;
                }
                if (lastDay < 10) {
                    day = "0" + lastDay;
                } else {
                    day = lastDay;
                }
                //选择月份的第一天
                let firstDayStr = firstDay.getFullYear() + "-" + mon + "-" + "0" + firstDay.getDate() + " 00:00:00";
                //选择月份的最后一天
                let lastDayStr = firstDay.getFullYear() + "-" + mon + "-" + day + " 23:59:59";
                request.get("/client/findPdfData?clientId="+ val + "&startTime=" + firstDayStr + "&endTime=" + lastDayStr).then(res => {
                    localStorage.setItem("pdfData",JSON.stringify(res.data))
                    window.open("/pdf")
                })
            },
            // 搜索及初始化
            load() {
                let level = JSON.parse(localStorage.getItem("user")).level
                if (this.currentData.level !== undefined) {
                    level = this.currentData.level
                }
                let isAllClient = JSON.parse(localStorage.getItem("user")).isAllClient;
                let clientIds;
                if (isAllClient === "1") {
                    clientIds = JSON.parse(localStorage.getItem("user")).clientIds;
                } else {
                    clientIds = [];
                }
                request.get("/client/listbyorgan?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize+"&level="+
                    level+"&organizationId="+this.selectedOrganizationId+"&name="+this.keyWord+"&address="+"&isAllClient="+isAllClient+"&clientIds="+clientIds).then(res => {
                    if (res.code === '200') {
                        for (let key in res.data) {
                            if (key === "record") {
                                this.tableData = res.data[key];
                            } else if (key === "total") {
                                this.total = res.data[key];
                            }
                        }
                    } else {
                        this.$message.error("错误" + res.msg)
                    }
                })
            },
            handleSizeChange(pageSize) {   // 改变当前每页的个数触发
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum) {  // 改变当前页码触发
                this.currentPage = pageNum
                this.load()
            },
        }
    }
</script>

<style scoped>

</style>
